<template>
  <div>
    <el-drawer
      :title="title"
      :visible.sync="editInfoDrawer"
      :close-on-click-modal="false"
      ref="editInfoDrawer"
      size="800px"
    >
      <div class="container">
        <div class="car-info-container">
          <section class="left-container">
            <section class="title">车辆信息</section>
          </section>
          <section style="width: 734px; margin-top: 10px; margin-right: 10px">
            <el-form ref="form" :model="editform" label-width="105px">
              <el-row :gutter="20">
                <el-col :span="12">
                  <section style="display: flex">
                    <el-form-item label="车牌号:" class="select">
                      <el-select clearable
                        size="small"
                        v-model="editform.vese"
                        placeholder="请选择"
                        style="border-radius: 0px; !important"
                      >
                        <el-option label="餐厅名" value="1"></el-option>
                        <el-option label="订单号" value="2"></el-option>
                        <el-option label="用户电话" value="3"></el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item class="input" label-width="0px">
                      <el-input
                        size="small"
                        style="width: 180px"
                        placeholder="请输入内容"
                        v-model="editform.vese"
                        class="input-with-select"
                      >
                      </el-input>
                    </el-form-item>
                  </section>
                </el-col>

                <el-col :span="12">
                  <el-form-item label="*运输许可证:">
                    <el-select clearable
                      size="small"
                      v-model="editform.region"
                      placeholder="请选择活动区域"
                    >
                      <el-option label="区域一" value="shanghai"></el-option>
                      <el-option label="区域二" value="beijing"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="固定皮重">
                    <el-input
                      size="small"
                      placeholder="请输入内容"
                      v-model="editform.vese"
                      class="input-with-select"
                    >
                      <span slot="suffix" class="">吨</span>
                    </el-input>
                  </el-form-item>
                </el-col>

                <el-col :span="12">
                  <el-form-item label="标准载重">
                    <el-input
                      placeholder="请输入内容"
                      size="small"
                      v-model="editform.vese"
                    >
                      <span slot="suffix" class="">吨</span>
                    </el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="运输许可证:">
                    <el-input
                      size="small"
                      placeholder="请输入内容"
                      v-model="editform.vese"
                      class="input-with-select"
                    >
                    </el-input>
                  </el-form-item>
                </el-col>

                <el-col :span="12">
                  <el-form-item label="行驶证:">
                    <el-input
                      placeholder="请输入内容"
                      size="small"
                      v-model="editform.vese"
                    >
                    </el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="车辆分组:">
                    <el-select clearable
                      size="small"
                      v-model="editform.region"
                      placeholder="请选择活动区域"
                    >
                      <el-option label="区域一" value="shanghai"></el-option>
                      <el-option label="区域二" value="beijing"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="24">
                  <el-form-item label="车辆类型:">
                    <el-checkbox-group v-model="checkList">
                      <el-checkbox label="复选框 A"></el-checkbox>
                      <el-checkbox label="复选框 B"></el-checkbox>
                      <el-checkbox label="复选框 C"></el-checkbox>
                    </el-checkbox-group>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </section>
        </div>
        <div class="car-info-container">
          <section class="left-container2">
            <section class="title">车主信息</section>
          </section>
          <section style="width: 734px; margin-top: 10px; margin-right: 10px">
            <el-form ref="form" :model="editform" label-width="105px">
              <el-row>
                <el-col :span="12">
                  <el-form-item label="姓名">
                    <el-input
                      placeholder="请输入内容"
                      size="small"
                      v-model="editform.vese"
                    >
                      <span slot="suffix" class="">吨</span>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="手机号码:">
                    <el-input
                      size="small"
                      placeholder="请输入内容"
                      v-model="editform.vese"
                      class="input-with-select"
                    >
                    </el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="证件号码:">
                    <el-input
                      placeholder="请输入内容"
                      size="small"
                      v-model="editform.vese"
                    >
                    </el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </section>
        </div>
        <div class="car-info-container">
          <section class="left-container2">
            <section class="title">常用司机</section>
          </section>
          <section style="width: 734px; margin-top: 10px; margin-right: 10px">
            <el-form ref="form" :model="editform" label-width="105px">
              <el-row>
                <el-col :span="12">
                  <el-form-item label="姓名">
                    <el-input
                      placeholder="请输入内容"
                      size="small"
                      v-model="editform.vese"
                    >
                      <span slot="suffix" class="">吨</span>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="手机号码:">
                    <el-input
                      placeholder="请输入内容"
                      size="small"
                      v-model="editform.vese"
                      class="input-with-select"
                    >
                    </el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="证件号码:">
                    <el-input
                      placeholder="请输入内容"
                      v-model="editform.vese"
                      size="small"
                    >
                    </el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </section>
        </div>
        <div class="car-info-container">
          <section class="left-container2">
            <section class="title">车辆证照</section>
          </section>
          <section style="width: 734px; margin-top: 10px; margin-right: 10px">
            <el-form ref="form" :model="editform" label-width="105px">
              <el-row>
                <el-col :span="24">
                  <el-form-item label="运输许可证">
                    <el-input
                      placeholder="请输入内容"
                      v-model="editform.vese"
                      size="small"
                    >
                      <span slot="suffix" class="">吨</span>
                    </el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <el-form-item label="手机号码:">
                    <el-input
                      placeholder="请输入内容"
                      size="small"
                      v-model="editform.vese"
                      class="input-with-select"
                    >
                    </el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <el-form-item label="证件号码:">
                    <el-input
                      placeholder="请输入内容"
                      size="small"
                      v-model="editform.vese"
                    >
                    </el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </section>
        </div>

        <section style="width:200px;height:140px;margin:0 auto;">
          <el-button type="primary">确定</el-button>
          <el-button>取消</el-button>
        </section>
      </div>
    </el-drawer>
  </div>
</template>
<script>
export default {
  data () {
    return {
      editInfoDrawer: false,
      method: '',
      title: ' ',
      editform: {},
      checkList: ['选中且禁用', '复选框 A']
    }
  },
  methods: {
    init (method, obj) {
      if (method === 'add') {
        this.title = '车辆信息新增'
        this.editInfoDrawer = true
      }
    },
    handleClose(done) {
		this.$Msg.confirm({
			title:'您确定要关闭吗？',
			content:this.GLOBAL.FORM_CLOSE_TIPS,
			confirmCall:()=>{
				done();
			}
		})
	},
  }
}
</script>
<style lang="scss" scoped>
.container {
  overflow: auto;
  width: 100%;
  height: 100vh;
}
.car-info-container {
  width: 759px;
  display: flex;
  margin: 0 auto;
  margin-bottom: 10px;
  width: 759px;
  background: #ffffff;
  border: 1px solid #dddddd;
  box-shadow: 0px 0px 5px 0px rgba(51, 51, 51, 0.05);
  border-radius: 4px;
}
.left-container {
  position: relative;
  width: 35px;
  background: #eeeeee;

  .title {
    position: absolute;
    top: 35%;
    left: 25%;
    width: 20px;
    margin: 0 auto;
    line-height: 24px;
    font-size: 20px;
  }
}
.left-container2 {
  position: relative;
  width: 35px;
  background: #eeeeee;

  .title {
    position: absolute;
    top: 15%;
    left: 25%;
    width: 20px;
    margin: 0 auto;
    line-height: 24px;
    font-size: 20px;
  }
}

.select ::v-deep .el-input__inner {
  -webkit-appearance: none;
  background-color: #fff;
  background-image: none;
  border-radius: 4px 0px 0px 4px !important;
}
.input ::v-deep .el-input__inner {
  -webkit-appearance: none;
  background-color: #fff;
  background-image: none;
  border-radius: 0px 4px 4px 0px !important;
}
</style>